<template>
	<!-- 订单页面 -->
	<div class="demo">
		<van-nav-bar
			title="订单"
			left-text="返回"
			left-arrow
			@click-left="onClickLeft"
			@click-right="onClickRight"
		>
			<template #right>
				<van-icon name="search" size="18" />
			</template>
		</van-nav-bar>

		<div class="demo-content">
			<Tabs v-model="acitve" @change="onChange">
				<Tab v-for="(item, index) in tabs" :title="item.name" :key="index">
					<div class="demo-content-item" v-for="(value, i) in item.data" :key="i">
						<Card
							:thumb="value.goodsImg"
							:title="value.goodsName"
							:price="value.goodsPrice"
							:num="value.goodsAmount"
						></Card>
						<div class="demo-content-iten-state">
							{{ value.orderSate }}
						</div>
					</div>
				</Tab>
			</Tabs>
		</div>
	</div>
</template>
<script>
import { Tab, Tabs, Card } from "vant";
import { getStateDate } from "../api/api";
export default {
	name: "",
	components: {
		Tab,
		Tabs,
		Card
	},
	data() {
		return {
			acitve: 0,
			tabs: [
				{
					name: "未支付",
					data: null
				},
				{
					name: "待发货",
					data: null
				},
				{
					name: "待收货",
					data: null
				},
				{
					name: "待评价",
					data: null
				},
				{
					name: "已完成",
					data: null
				}
			]
		};
	},
	mounted() {
		// console.log(this);
		const name = this.$route.params.nums * 1;
		const index = isNaN(name) ? 0 : name;

		this.acitve = index;

		this.onChange(this.acitve);
	},
	methods: {
		onClickRight() {},
		onClickLeft() {
			this.$router.go(-1);
		},
		async onChange(name) {
			this.acitve = name;
			const tabsName = this.tabs[name].name;
			const data = this.tabs[name].data;
			if (data === null) {
				let res = await getStateDate(tabsName);
				if (res.data instanceof Array && res.data.length > 0)
					this.tabs[name].data = res.data.filter(el => el.orderSate == tabsName);
			}
		}
	},
	computed: {}
};
</script>
<style lang="less" scoped>
.demo {
	.demo-content-item {
		position: relative;
		margin: 10px 0;
		.demo-content-iten-state {
			position: absolute;
			top: 0;
			right: 0;
			margin: 10px;
		}
	}
}
</style>
